<template>
	<view class="">
			<!-- <view class="">
				<u-image mode="widthFix" src="https://pxhuodong.oss-cn-beijing.aliyuncs.com/ibuycar/swiper/swiper01.png"></u-image>
			</view> -->
			<!-- <vin @fileList='fileList'></vin>
			<view class="searchBox">
				<view class="" style=" color: #888;">
					小技巧：证件图完整清晰，才能顺利查到报告
				</view>
				<view class="searchContext">
					<u-input style="width: 100%;" v-model="getInfo.vin" :clearable="false" maxlength='17' trim='true' @blur="vpnGet()" @input="toUppercase()"  placeholder-style="color: #002B56;" type="text"  placeholder="请输入vin"  />
				</view>
				<view class="_flex _justify_between" style="margin-top: 50rpx;">
					<view class="" style="width: 30%;" >
						<u-button @click="example" type="primary" plain>样例</u-button>
					</view>
					<view class="" style="width: 60%;">
						<u-button  type="primary" @click="getMaintenanceRecords">开始查询</u-button>
					</view>
				</view>
				<view class=""  style="margin-top: 40rpx;">
					<u-checkbox-group>
						<u-checkbox active-color="#002B56" v-model="form.checked" shape="circle">
							<text class="tip">使用本服务意味着您已经阅读并同意</text>
							<text class="tip" style="color: #002B56;">《用户协议》</text>
						</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="" style="padding: 20rpx 0; color: #888;">
					部分品牌20:00后查询将于次日上午9点后反馈车况报告
				</view>
			</view> -->
			
			<vin @fileList='fileList'></vin>
				<view class="searchBox">
					<view class="searchContext">
						<image src="../../static/VIN.png" mode=""></image>
						<u-input style="width: 100%;    padding-left: 20rpx;" v-model="getInfo.vin" :clearable="false" maxlength='17' trim='true' @blur="vpnGet()" @input="toUppercase()"  placeholder-style="color: #002B56;" type="text"  placeholder="请输入vin"  />
						<!-- <u-icon name="camera-fill" @click="scanCode"></u-icon> -->
					</view>
					<view class="buttons">
						
						<view class="kscx" @click="getMaintenanceRecords">
							开始查询
						</view>
						<view class="ckyl"  @click="example">
							查看样例
						</view>
					</view>
					<view class=""  style="margin-top: 40rpx;">
						<u-checkbox-group>
							<u-checkbox active-color="#002B56" v-model="form.checked" shape="circle" @change="uerAgreement">
								<text class="tip">使用本服务意味着您已经阅读并同意</text>
								<text class="tip" style="color: #002B56;" @click="goUserAgreement">《用户协议》</text>
							</u-checkbox>
						</u-checkbox-group>
						
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import API from "@/api/report.js"
export default {
	data() {
		return {
			form: {
				checked:true
			},
			getInfo:{
				image:"",
				vin:""
			},
		};
	},
	methods:{
		toUppercase(e) {
			this.getInfo.vin = this.getInfo.vin.toUpperCase();
				console.log(this.getInfo.vin)
		},
		vpnGet(e) {
			
			this.getInfo.vin = null;
			
			this.getInfo.vin = e.replace(/[\u4E00-\u9FA5]/g,'')
			
			if (e.length == 17) {
				API.getVin({
					vin: e
				}).then(res => {
					console.log(res)
					if (res.data.isHaveVin) {
						this.carInfoJson = res.data
						this.assessInfo.carModel = res.data.modelName
						this.assessInfo.seriesId = res.data.seriesId
						this.assessInfo.brandId = res.data.brandId
						this.assessInfo.modelId = res.data.modelId
						this.assessInfo.color = res.data.color
		
					}
					//  else {
		
					// 	this.isHaveVin = true
					// }
					else{
		
						this.$u.toast(res.message || '请输入17位车架号');
						this.isHaveVin = false;
						return false
					}
				})
			} else {
				this.$u.toast('请输入17位车架号');
			}
		},
		getOcrInfo(image){
			console.log(image);
			let data = {
				image:image,
			}
			API.getOcrInfo(data).then(res=>{
				console.log(res);
				if(res.code == 200){
					this.getInfo.vin = res.data.vin
				}
			})
		},

		getMaintenanceRecords(){
			console.log(this.getInfo);
			if(!this.getInfo.image){
				this.$u.toast('请先上传图片');
				return false
			}
			if(!this.getInfo.vin){
				this.$u.toast('请先填写VIN码');
				return false
			}
			//正则表达式
			let reg_chassis = /^[A-HJ-NPR-Z\d]{17}$/; //车架号
			let sign_chassis = RegExp(reg_chassis).test(this.getInfo.vin);
			if(this.getInfo.vin && !sign_chassis ){
				this.$u.toast('请输入17位有大写字母和数字组成VIN码');
				return false
			}
			
			if(this.form.checked == false){
				this.$u.toast('请阅读并同意用户协议！');
				return false
			}
			
			API.getMaintenanceRecords(this.getInfo).then(res=>{
				console.log(res)
				if(res.code==200 && res.data){
					this.orderNo = res.data.orderNo;
					uni.navigateTo({
						url:"./wbRecordReport?orderNo=" + this.orderNo
					})
				}
				else{
					this.$u.toast(res.message);
					return false
				}
				// else if(res.message == 'token验证失效'){
				// 	uni.navigateTo({
				// 		url:"./wbRecordReport?orderNo=" + this.orderNo
				// 	})
				// }
			
			})
		},
		// 切换城市code
		fileList(fileList){
			this.getInfo.image = fileList
			console.log("从组建获取的列表")
			console.log(this.getInfo.image)
		this.getOcrInfo(this.getInfo.image)
		},
		example(){
			uni.navigateTo({
				url:"./wbRecordExample"
			})
		}
		}
};
</script>
<style>
page {
background-color: #fff;
}
</style>
<style scoped lang="scss">
	.buttons{
		view{
			margin-top: 40rpx;
		}
	}
	.searchBox{
		padding:$uni-widthspace;
		.searchContext{
			    // background: #F4F6F5;
			    display: flex;
			    padding: 10rpx 24rpx;
			    border-radius: 15rpx;
				box-sizing: border-box;
				font-size: 40rpx;
				color: #002B56;
				margin-bottom:$uni-widthspace;
				border-bottom: 1px solid #EFEFEF ;
				image{
					width: 42rpx;
					height: 30rpx;
					margin-top: 20rpx;
				}
			}
	}
	
	.tip{
		font-family: PingFangSC-Regular;
		font-size: 24rpx;
		color: #999999;
		text-align: center;
	}
	.ckyl{
		font-family: PingFangSC-Regular;
		font-size: 36rpx;
		color: #002B56;
		text-align: center;
	}
	.u-size-default{
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		padding: 10rpx 0;
	}
	.kscx{
		width: 100%;
		background: #002B56;
		border-radius: 8rpx;
		height: 88rpx;
		line-height: 88rpx;
		color: #fff;
		font-family: PingFangSC-Regular;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
	}
	// .searchBox{
	// 	padding:$uni-widthspace;
	// }
	// .searchBox .searchContext{
	// 	   background: #F4F6F5;
	// 	   display: flex;
	// 	   padding: 0 24rpx;
	// 	   border-radius: 15rpx;
	// 	   box-sizing: border-box;
	// 	   font-size: 40rpx;
	// 	   color: #002B56;
	// 	   margin-bottom:$uni-widthspace;
	// 	   margin-top:$uni-widthspace;
	// 	}
	// 	.tip{
	// 		font-size: 24rpx;
	// 	}
	// 	.uploadTxt{
	// 		position: absolute;
	// 		    bottom: 40rpx;
	// 		    color: #fff;
	// 		    font-size: 24rpx;
	// 		    width: 100%;
	// 		    text-align: center;
	// 		}
</style>
<style>
	page{
		background-color: #fff;
	}
</style>